<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>
  
  <script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "./mixins/resize";

const animationDuration = 6000;

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart"
    },
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "250px"
    }
  },
  data() {
    return {
      chart: null
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      //缩放比例配置
      var scale = 1;

      //真实数据
      var ecahrtData = [
        {
          value: 1048, //百分比
          name: "未分类收集建筑垃圾、混入生活垃"
        },
        {
          value: 735,
          name: "擅自倾倒、抛撒、堆放建筑垃圾"
        },
        {
          value: 580,
          name: "未按规定利用或处置建筑垃圾"
        }
      ];

      //数据配置形成金字塔形状固定
      var data = [
        {
          value: 1048, //百分比
          name: "未分类收集建筑垃圾、混入生活垃"
        },
        {
          value: 735,
          name: "擅自倾倒、抛撒、堆放建筑垃圾"
        },
        {
          value: 580,
          name: "未按规定利用或处置建筑垃圾"
        }
      ];

      //富文本配置
      var rich = {
        yellow: {
          color: "#ffc72b",
          fontSize: 19 * scale,
          padding: [0, 0]
        },
        blue: {
          color: "#3fdaff",
          fontSize: 19 * scale,
          padding: [0, 0]
        },
        white: {
          color: "#fff",
          align: "left",
          fontSize: 18 * scale,
          padding: [0, 0]
        },
        tip: {
          color: "#ffc72b",
          fontSize: 32 * scale
        }
      };
      //颜色配置
      var color = [
        {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "rgba(167,36,93,0.1)" // 0% 处的颜色
            },
            {
              offset: 1,
              color: "rgba(167,36,93,0.4)" // 100% 处的颜色
            }
          ],
          globalCoord: false // 缺省为 false
        },
        {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "rgba(167,36,93,0.4)" // 0% 处的颜色
            },
            {
              offset: 1,
              color: "rgba(167,36,93,0.7)" // 100% 处的颜色
            }
          ],
          globalCoord: false // 缺省为 false
        },
        {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "rgba(167,36,93,0.7)" // 0% 处的颜色
            },
            {
              offset: 1,
              color: "rgba(167,36,93,0.9)" // 100% 处的颜色
            }
          ],
          globalCoord: false // 缺省为 false
        }
      ];

      this.chart = echarts.init(this.$el, "macarons");

      this.chart.setOption({
        backgroundColor: "#031f2d",
        // legend: {
        //   formatter: function(name) {
        //     var sum = 0; //各科正确率总和
        //     var averagePercent; //综合正确率
        //     ecahrtData.forEach(function(value, index, array) {
        //       sum += value.value;
        //     });
        //     averagePercent = (sum / ecahrtData.length).toFixed(2);
        //     return (
        //       "{tip|" +
        //       averagePercent +
        //       "%}{white|" +
        //       "  " +
        //       "( 整体未通过率 )" +
        //       "}"
        //     );
        //   },
        //   data: [ecahrtData[0].name],
        //   // data: ['高等教育学'],
        //   itemGap: 50,
        //   left: "center",
        //   top: "5%",
        //   icon: "none",
        //   textStyle: {
        //     color: "#fff",
        //     fontSize: 16 * scale,
        //     rich: rich
        //   }
        // },
        calculable: true,
        color: color,
        tooltip: {
          show: true,
          formatter: function(params) {
            var percent = 0;
            ecahrtData.forEach(function(value, index, array) {
              if (params.name == value.name) {
                percent = value.value;
              }
            });
            return params.name + "\n" + "\n" + "违章总数：" + percent;
          }
        },
        series: [
          {
            name: "金字塔",
            type: "funnel",
            left: "7%",
            top: "28%",
            bottom: "5%",
            width: "62%",
            sort: "ascending",
            funnelAlign: "center",
            gap: 8 * scale,
            label: {
              normal: {
                show: true,
                position: "right",
                // textStyle: {
                //     fontSize: 16 * scale
                // },
                formatter: function(params) {
                  var percent = 0;
                  ecahrtData.forEach(function(value, index, array) {
                    if (params.name == value.name) {
                      percent = value.value;
                    }
                  });

                  return (
                    "{yellow|" +
                    percent +
                    "}{white|}\n{circle|}\n{blue|" +
                    params.name.slice(0,5) + '...' +
                    "}"
                  );
                },
                rich: rich
              }
            },
            labelLine: {
              normal: {
                length: 55 * scale,
                lineStyle: {
                  width: 2 * scale,
                  type: "solid",
                  color: "#093a50"
                }
              }
            },
            itemStyle: {
              normal: {
                borderColor: "#fff",
                borderWidth: 0
              }
            },
            data: data
          }
        ]
      });
    }
  }
};
</script>
  